<template>
  <view class="container">
    <view class="page-header">
      <view class="page-title">按钮组件演示</view>
      <view class="page-desc">展示各种样式和状态的按钮组件</view>
    </view>

    <!-- 基础按钮 -->
    <view class="section">
      <view class="section-title">基础按钮</view>
      <view class="demo-card">
        <view class="button-group">
          <button class="btn btn-primary">主要按钮</button>
          <button class="btn btn-secondary">次要按钮</button>
          <button class="btn btn-success">成功按钮</button>
          <button class="btn btn-danger">危险按钮</button>
          <button class="btn btn-warning">警告按钮</button>
          <button class="btn btn-info">信息按钮</button>
        </view>
      </view>
    </view>

    <!-- 按钮尺寸 -->
    <view class="section">
      <view class="section-title">按钮尺寸</view>
      <view class="demo-card">
        <view class="button-group">
          <button class="btn btn-primary btn-small">小按钮</button>
          <button class="btn btn-primary">默认按钮</button>
          <button class="btn btn-primary btn-large">大按钮</button>
        </view>
      </view>
    </view>

    <!-- 按钮形状 -->
    <view class="section">
      <view class="section-title">按钮形状</view>
      <view class="demo-card">
        <view class="button-group">
          <button class="btn btn-primary btn-round">圆角按钮</button>
          <button class="btn btn-primary btn-circle">圆形按钮</button>
          <button class="btn btn-primary btn-square">方形按钮</button>
        </view>
      </view>
    </view>

    <!-- 按钮状态 -->
    <view class="section">
      <view class="section-title">按钮状态</view>
      <view class="demo-card">
        <view class="button-group">
          <button class="btn btn-primary" :disabled="false">正常状态</button>
          <button class="btn btn-primary" :disabled="true">禁用状态</button>
          <button class="btn btn-primary btn-loading" :disabled="loading" @click="handleLoading">
            {{ loading ? '加载中...' : '加载按钮' }}
          </button>
        </view>
      </view>
    </view>

    <!-- 按钮组 -->
    <view class="section">
      <view class="section-title">按钮组</view>
      <view class="demo-card">
        <view class="button-group-inline">
          <button class="btn btn-outline">取消</button>
          <button class="btn btn-primary">确认</button>
        </view>
        <view class="button-group-stack">
          <button class="btn btn-primary btn-block">全宽按钮</button>
          <button class="btn btn-outline btn-block">全宽按钮</button>
        </view>
      </view>
    </view>

    <!-- 图标按钮 -->
    <view class="section">
      <view class="section-title">图标按钮</view>
      <view class="demo-card">
        <view class="button-group">
          <button class="btn btn-primary btn-icon">
            <text class="icon">➕</text>
            添加
          </button>
          <button class="btn btn-success btn-icon">
            <text class="icon">✓</text>
            完成
          </button>
          <button class="btn btn-danger btn-icon">
            <text class="icon">🗑️</text>
            删除
          </button>
        </view>
      </view>
    </view>

    <!-- 浮动按钮 -->
    <view class="section">
      <view class="section-title">浮动按钮</view>
      <view class="demo-card">
        <view class="fab-container">
          <button class="btn btn-primary fab" @click="showFabMenu = !showFabMenu">
            <text class="fab-icon">{{ showFabMenu ? '✕' : '➕' }}</text>
          </button>
          <view class="fab-menu" v-if="showFabMenu">
            <button class="btn btn-success fab-item" @click="handleFabAction('add')">
              <text class="icon">📝</text>
            </button>
            <button class="btn btn-info fab-item" @click="handleFabAction('edit')">
              <text class="icon">✏️</text>
            </button>
            <button class="btn btn-warning fab-item" @click="handleFabAction('share')">
              <text class="icon">📤</text>
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 代码示例 -->
    <view class="section">
      <view class="section-title">代码示例</view>
      <view class="demo-card">
        <view class="code-block">
          <text class="code-text">
&lt;button class="btn btn-primary"&gt;主要按钮&lt;/button&gt;
&lt;button class="btn btn-secondary"&gt;次要按钮&lt;/button&gt;
&lt;button class="btn btn-success"&gt;成功按钮&lt;/button&gt;
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ButtonDemo',
  data() {
    return {
      loading: false,
      showFabMenu: false
    }
  },
  methods: {
    handleLoading() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        uni.showToast({
          title: '加载完成',
          icon: 'success'
        })
      }, 2000)
    },
    handleFabAction(action) {
      this.showFabMenu = false
      uni.showToast({
        title: `执行${action}操作`,
        icon: 'success'
      })
    }
  }
}
</script>

<style scoped>
.page-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.page-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.page-desc {
  font-size: 26rpx;
  color: #666;
}

.demo-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  align-items: center;
}

.button-group-inline {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.button-group-stack {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.btn-block {
  width: 100%;
}

.btn-round {
  border-radius: 50rpx;
}

.btn-circle {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-square {
  border-radius: 0;
}

.btn-icon {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.icon {
  font-size: 24rpx;
}

.btn-loading {
  position: relative;
  opacity: 0.7;
}

.fab-container {
  position: relative;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fab {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  position: relative;
  z-index: 10;
  box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
}

.fab-icon {
  font-size: 32rpx;
  font-weight: bold;
}

.fab-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 20rpx;
  z-index: 5;
}

.fab-item {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fabItemAppear 0.3s ease-out;
}

@keyframes fabItemAppear {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.code-block {
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 20rpx;
  border-left: 4rpx solid #007aff;
}

.code-text {
  font-family: 'Courier New', monospace;
  font-size: 24rpx;
  color: #333;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .button-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .button-group-inline {
    flex-direction: column;
  }
}
</style>
